<template>
  <div class="true-or-false-question">
    <div class="question-result" v-if="showAnswerResult">
      <img :src="correctImg" alt="" v-if="answerRight()" />
      <img :src="errorImg" alt="" v-else />
    </div>
    <div>
      <Checkbox
        v-if="showChecked"
        label=""
        @on-change="handleSelect($event, question)"
        v-model="question._checked"
        :disabled="getDisabled(question)"
      >
      </Checkbox>
      <span class="question-no" style="margin-right:0px">{{ index + 1 }}、</span>
      <span class="question-name" v-text="question.name"></span>
      <span v-if="showScore">({{ question.score }}分)</span>
      <Tag v-if="question.modeCode" class="question-type" color="blue">{{
        question.modeCode | modeFilter
      }}</Tag>
      <Tag
        color="blue"
        v-for="(point, index) in filterAllPoints(question.typeCode || question.type)"
        :key="index"
        >{{ point }}</Tag
      >
      <Tag v-if="question.difficulty" class="question-diffculty" color="green">{{
        question.difficulty | difficultyFilter
      }}</Tag>
      <Tag v-if="question.visibility" class="question-visibility" color="purple">{{
        question.visibility | filterIsPublic
      }}</Tag>
      <span v-if="showAnswerResult && showNoAnswer && !question.userAnswer" class="no-answer"
        >（此题未作答）</span
      >
      <span class="question-action" style="float:right;">
        <slot name="action" v-bind:question="question" v-bind:index="index"> </slot>
      </span>
    </div>
    <div class="answer-wrapper">
      <template v-if="pattern === 'show'">
        <p
          v-for="(answer, index) in question.answers"
          :key="answer.answerId"
          :class="{ 'right-answer': answer.isRight }"
        >
          <span v-text="getAnswerDes(answer, index)"></span>
        </p>
      </template>
      <template v-else>
        <RadioGroup
          v-model="question.userAnswer"
          @on-change="selectAnswer($event, question, index)"
        >
          <div v-for="(questionAnswer, key) in question.answers" :key="key">
            <Radio label="1" :disabled="disabledAnswer">
              <span :class="{ 'right-answer': questionAnswer.isRight == '1' && showRightAnswer }"
                >[A] 正确</span
              >
            </Radio>
            <Radio label="0" :disabled="disabledAnswer">
              <span :class="{ 'right-answer': questionAnswer.isRight == '0' && showRightAnswer }"
                >[B] 错误</span
              >
            </Radio>
            <br />
          </div>
        </RadioGroup>
      </template>
    </div>
    <div v-if="showExplanation" class="question-explanation">
      答案解析：
      <span v-if="question.explanation" v-text="question.explanation"></span>
      <span v-else>暂无解析</span>
    </div>
  </div>
</template>
<script>
import common from './mixin'
// import usally from '@/mixin/usally'
export default {
  name: 'TrueOrFalseQuestion',
  mixins: [common],
  props: {
    question: {
      type: Object,
      validator(value) {
        //3-判断
        return value.modeCode.toString() === '3' && value.name && value.answers
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    question(val) {
      this.initAnswer()
    }
  },
  mounted() {
    this.initAnswer()
  },
  methods: {
    initAnswer() {
      if (this.pattern === 'show' && this.question.answers.length == 1) {
        this.question.answers = [
          {
            isRight: this.question.answers[0].isRight == 0 ? 0 : 1,
            answerId: '1',
            description: '[A] 正确'
          },
          {
            isRight: this.question.answers[0].isRight == 1 ? 0 : 1,
            answerId: '2',
            description: '[B] 错误'
          }
        ]
      }
    },
    selectAnswer(userAnswer, question, index) {
      if (this.pattern === 'answer') {
        this.$emit('handleAnswerSelect', question, index, userAnswer)
      }
    }
  }
}
</script>
<style scoped src="./question.css"></style>
